<template>
  <div class="movieItem" @click="getDetail">
    <div class="left">
      <img v-lazy="mitem.img"  @click.stop="viewMovieImage(mitem.img)" alt>
    </div>
    <div class="center">
      <div class="m_title">{{mitem.nm}}</div>
      <div class="m_score" v-if="mitem.globalReleased==true">
        观众评：
        <span>{{mitem.sc}}</span>
      </div>
      <div class="m_score" v-if="mitem.globalReleased==false">
        <span>{{mitem.wish}}</span>想看
      </div>
      <div class="m_star">主演: {{mitem.star}}</div>
      <div class="showInfo">{{mitem.showInfo}}</div>
    </div>
    <div class="right">
      <button v-if="mitem.globalReleased==true" type="button" class="btnBuy" @click.stop="buyTicket">购票</button>
      <button v-if="mitem.globalReleased==false" type="button" class="buyPre" @click.stop="buyTicket">预售</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "movieItem",
    props: ["mitem","p_imgs"],
    methods: {
      buyTicket() {
        this.showActionSheet({
          items: ["我要购票", "查看详细"],
          success: res => {
            if (res == 0) {
              this.$toast("你要购票");
            } else if (res == 1) {
              this.$toast("你要查看电影的详细信息");
            }
          }
        });
      },
      getDetail() {
        this.$router.push({
          name: "movieDetail",
          query: {
            id: 1
          }
        });
      },
      viewMovieImage(imgUrl){
        this.showPreviewImage({
          urls:this.p_imgs,
          current:this.mitem.p_img
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .movieItem {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 0.15rem 0.15rem;

    .left {
      width: 1.28rem;

      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    .center {
      padding-bottom: 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      font-size: 0.24rem;
      color: #666;
      margin-left: 0.2rem;
      border-bottom: 1px solid #ececec;

      .m_title {
        font-size: 0.36rem;
        color: black;
      }

      .m_score {
        font-size: inherit;

        span {
          font-weight: 700;
          color: #faaf00;
        }
      }

      .m_star {
        font-size: inherit;
      }

      .showInfo {
        font-size: inherit;
      }
    }

    .right {
      width: 0.94rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ececec;

      .btnBuy {
        width: 0.94rem;
        height: 0.54rem;
        background-color: #f03d37;
        border-radius: 0.1rem;
        font-size: 0.24rem;
        color: #ffffff;
        outline: none;
        border: none;
      }
      .buyPre{
        @extend .btnBuy;
        background-color: #3c9fe6;
      }
    }
  }
</style>